Можно Так Сделать С Картинкой?

botyaslonim · September 8, 2010

Вдохновил этот пример: http://radio.momoiro.ru/ballz.html

Можно ли так сделать с изображением? Разбить его на кусочки, и чтобы при прохождении курсора оно распадалось еа куски, а после куски снова собирались в картинку?

psywalker · September 8, 2010

Дело в том, что это работа займёт у тебя 20 лет)) Это делается из кучи дивов, абсолюта, бордер-радиуса и т.д. Изначально разбрасываешь абсолютом дивы на нужные позиции, далее при наведении на них увеличиваешь их размер и меняешь позицию, а при уведении мыши возвращаешь на место, только делаешь всё это видимо сетИнтервалом. или сетТаймаутом.

botyaslonim · September 8, 2010

В вышеприведённом примере достаточно несложно реализовано. Правда, там подключён prototype.js, в котором я не шарю. Я вот думаю, можно ли просто подпихнуть вместо массива ballz массив picts или что-то вроде, где в атрибутах указывать (left,top,widht,height,src) ?

fan · September 9, 2010

Дело в том, что это работа займёт у тебя 20 лет))

Не пугайся, товарищЪ пошутил.

Вся сложность в математике, в расчётах координат.

Реально эти расчёты займут десяток другой строк, посмотри всякие дожди, снег и прочие подобные скрипты. Вполне можно подобрать нечто похожее, и переделать под свои нужды.

Сложно не зависит от количества элементов.

И не надо ни каких монстров-библиотек.

Если не трудно, скажи где это баловство можно реально применить?

botyaslonim · September 9, 2010

Да везде :lol: Делаю сайт, там нужна более-менее неожиданная анимация.

psywalker · September 9, 2010

Не пугайся, товарищЪ пошутил.

Да, а ты видел сколько там дивов и у каждого свои коодринаты? А ты не запаришься их прописывать?

rus · September 9, 2010

Да, а ты видел сколько там дивов и у каждого свои коодринаты? А ты не запаришься их прописывать?

Макс, так они генерятся автоматом и рандомно походу.

botyaslonim · September 9, 2010

А можно показать, где там дивы? В смысле, там генерятся эти шарики. У каждого свои координаты, согласен. Но прописать координаты - час-два работы.

Я вчера для одного проекта переделал пример из первого поста так, чтобы было слово "УРА!". Заняло как раз два часа очень неспешного труда :lol:

Меня просто интересует вполне конкретная вещь: как вместо массива ballz подставить другой массив, скажем, pics, в котором будут указаны координаты кусков картинки и, ессно, src (который можно выполнить спрайтом).

Да, а ты видел сколько там дивов и у каждого свои коодринаты? А ты не запаришься их прописывать?

Great Rash · September 9, 2010

Каждый шарик в этом скрипте - это отдельный объект ball, создается он при помощи метода newball c параметрами b, c, d, h. Что это за параметры мне не ясно (разве что h - это скорее всего hex, т.е. код цвета шара). В принципе в функции ball вместо присваивания класса, скругляющего углы, можно запихивать картинку с кругом - смысл от этого не поменяется.

Скрипт, кстати, не работает в ИЕ.

P.S. И походу без фреймворка можно обойтись, он там используется только для навешивания события mousemove на документ и для того чтоб узнать не под ИЕ ли мы сидим...

botyaslonim · September 9, 2010

Ну вроде получилось. Не могу только сообразить, как CSS-спрайт прикрутить. Поможете?

<!doctype html>
<html>
	<head>
		<title>test</title>
		<script type="text/javascript" src="prototype.js"></script>
	</head>
<body>
<div id=lga>
<style>
	body{
		overflow:hidden
	}
	#hplogo
	{
		position:relative;
		width:1000px;
		margin:30 30;
		left:200px;
		top:200px;
		height:400px;
	}
	.particle
	{
		position:absolute;
		z-index:-1
	}
	.circle
	{
		-moz-border-radius:160px;
		-webkit-border-radius:160px;
		-khtml-border-radius:160px;
		border-radius:160px
	}
	#cpf,#sbl,#fctr
	{
		background:transparent
	}

	p {font-family:tahoma;font-size:40px;}


</style>
<div id=hplogo></div>
</div>

<script>
(function() {
	try {
		doodle={};
		var a=200,g=-200,j=-200,k,l,m,n=0,o=0,p=0,q=35,r,ballz=[],container,isie,inited;
		doodle.init=function(cont)
		{
			if(!inited)
			{
				inited=true;
				if(container=document.getElementById(cont))
				{
					start_observe();
					create_ballz();
				}
			}
		};
		var start_observe=function()
		{
			document.observe("mousemove",mouse_move_process)
		}
		,
		mouse_move_process=function(event)
		{
			a=200;
			g=event.clientX-container.offsetLeft;
			j=event.clientY-container.offsetTop
		}
		,
		position=function()
		{
			return[isie?window.screenLeft:window.screenX,isie?window.screenTop:window.screenY,document.body.clientWidth]
		}
		,
		create_ballz=function()
		{
			isie=false;//!(!Prototype.Browser.IE || (Prototype.Browser.IE&& parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 9));
			   ballz=[
			   newball(0,0,50,"url('http://www2.hiren.info/desktopwallpapers/thumb/green-farm-and-blue-sky.jpg')"),
			   newball(0,100,50,"url('http://www2.hiren.info/desktopwallpapers/thumb/green-farm-and-blue-sky.jpg')"),
			   newball(0,200,50,"url('http://www2.hiren.info/desktopwallpapers/thumb/green-farm-and-blue-sky.jpg')"),
			   newball(0,300,50,"url('http://www2.hiren.info/desktopwallpapers/thumb/green-farm-and-blue-sky.jpg')"),
			   newball(0,400,50,"url('http://www2.hiren.info/desktopwallpapers/thumb/green-farm-and-blue-sky.jpg')"),
			   newball(100,100,50,"url('http://www2.hiren.info/desktopwallpapers/thumb/green-farm-and-blue-sky.jpg')"),


			   ];
			var b=position();
			k=b[0];
			l=b[1];
			m=b[2];
			update()
		}
		,
		update=function()
		{
			var b=position(),c=b[0],d=b[1];
			b=b[2];
			n=c-k;
			o=d-l;
			p=b-m;
			k=c;
			l=d;
			m=b;
			a=Math.max(0,a-2);
			c=true;
			for(d=0;b=ballz[d++];)
			{
				b.update();
				if(c)c=b.i
			}
			q= c?250:35;
			r=window.setTimeout(update,q)

		}
		,
		newball=function(b,c,d,h)
		{
			return new ball(b,c,d,h)
		}
		,
		ball=function(b,c,d,h)
		{
			this.x=this.o=b;
			this.y=this.p=c;
			this.k=this.h=d;
			b=15;
			this.a=b*(Math.random()-0.5);
			this.c=b*(Math.random()-5);
			this.l=3+Math.random()*98;
			this.r=0.1+Math.random()*1.2;
			this.e=0;
			this.g=1;
			this.i=false;
			this.d=document.createElement('div');
			this.d.className='particle';
			this.style=this.d.style;

			if(isie)
			{
				this.d.innerHTML="!";
				this.style.fontFamily="Monospace";
				this.style.backgroundImage=h;
				this.style.fontSize="100px";
				this.style.lineHeight=0;
				this.style.cursor="default"
			}
			else
			{
				//this.d.className+=" circle";
				this.style.backgroundImage=h
			}
			container.appendChild(this.d);
			this.remove=function()
			{
				container.removeChild(this.d)
			};
			this.update=function()
			{
				this.x+=this.a;
				this.y+=this.c;
				this.a=Math.min(50,Math.max(-50,(this.a+(n+p)/this.h)*0.92));
				this.c=Math.min(50,Math.max(-50,(this.c+o/this.h)*0.92));
				var e=g-this.x,f=j-this.y,i=Math.sqrt(e*e+f*f);
				e/=i;
				f/=i;
				if(i< a)
				{
					this.a-=e*this.l;
					this.c-=f*this.l;
					this.e+=(0.005-this.e)*0.4;
					this.g=Math.max(0,this.g*0.9- 0.01);
					this.a*=1-this.g;
					this.c*=1-this.g
				}
				else
				{
					this.e+=(this.r-this.e)*0.005;
					this.g=Math.min(1,this.g+0.03)
				}
				e=this.o-this.x;
				f=this.p-this.y;
				i=Math.sqrt(e*e+f*f);
				this.a+=e*this.e;
				this.c+=f*this.e;
				this.k=this.h+i/8;
				this.i=i< 0.3&&this.a< 0.3&&this.c< 0.3;
				if(!this.i)
				{
					if(this.k)
					{
						if(!isie)
							this.style.width=this.style.height=this.k*2+"px";
						this.style.left=this.x-(isie?20:0)+"px";
						this.style.top=this.y+"px"
					}
				}
			}
		}
	}
	catch(exc){
		alert(exc);
	};
})();
doodle.init("hplogo");
</script>
<p> УРА! </p>
</body>
</html>

Great Rash · September 9, 2010

Эммм, CSS-спрайт? Что должно быть то?

botyaslonim · September 9, 2010

Я хочу, чтобы одна картинка при наводке на неё курсора разлеталась на части, а потом снова собиралась.

Это уже можно сделать при помощи большого количества картинок (один осколок == одна картинка), но хочется уменьшить число обращений к серверу, то есть разбабахать одну картинку спрайтом.

Great Rash · September 9, 2010

И в чем проблема? Не знаете как спрайты делаются? Не можете this.style.backgroundPosition написать?

botyaslonim · September 9, 2010

delete, разобрался

Edited September 9, 2010 by botyaslonim

psywalker · September 9, 2010

margin:30 30; вот тут забыл единицы длины указать

botyaslonim · September 9, 2010

Это авторский код, я просто margin не трогал. Впрочем, оно и не нужно.

fan · September 10, 2010

Да, а ты видел сколько там дивов и у каждого свои коодринаты? А ты не запаришься их прописывать?

Здесь есть более шустрые ребята, уже ответили.

botyaslonim · September 10, 2010

Всё готово, смотрите результат :lol:

http://www.maksimslepov.ru/oskolki.html

upd. В IE не работает

Edited September 10, 2010 by botyaslonim

fan · September 10, 2010

Пнул ссылку.

В опере при движении мыши двигается вертикальная полоса прокрутки, при пустом экране.

Круто.

botyaslonim · September 10, 2010

Исправил.

Sign In

Можно Так Сделать С Картинкой?

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information